[AWS 입문] AWS Amplify + Android – Amazon Cognito 인증 추가해보기

AWS Amplify + Android 두번째 블로그입니다. Amplify와 통합된 서비스를 간단히 알아보고, Amazon Cognito를 활용한 Auth 추가와 인증을 위한 소스 코드 구현에 대해 다루고 있어요.

#Android

#Amazon Cognito

#AWS Amplify

#한국어블로그

#AWS

Haeun

2020.05.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

안녕하세요! 클래스메소드 주식회사 신입 엔지니어 정하은입니다?

먼저 지난 Amplify 블로그에 많은 관심 가져주신 것에 감사드립니다.. 여전한 삽질과 다른 일들 때문에 많이 늦었지만 이번에도 Amplify 로 돌아오게 되었어요.

그러고보니 지난 글에서는 Amplify 프로젝트 생성까지 무사히 마쳤죠! 하지만 앱의 구실을 하기 위한 구현은 전혀 하지 않았다는 것.. 이번 글부터는 속이 없는 빈 껍데기와 같은 프로젝트를 채워나가기 위한 과정으로 진행되니 잘 따라와주세요.

Amplify와 연관된 서비스

Amplify와 연관이 되어 있는 서비스들을 나타내보았는데요. 실제로는 이것들 외에도 더 많은 서비스들이 있는데, Amazon translate나 Amazon Textract, Amazon Polly 등도 포함된답니다.

아무튼 Amplify 와 통합되어 사용되는 서비스들이 많지만 여기서는 대표적으로 많이 쓰이는 서비스 세 가지에 대해서만 다루고 넘어갈게요.

AWS AppSync : GraphQL을 사용하여 애플리케이션에서 필요로 하는 데이터를 가져올 수 있도록 하는 관리형 서비스. 오프라인 상태이더라도 로컬로 데이터 액세스가 가능하도록 하고, 온라인 상태가 되면 데이터를 다시 동기화해줄 수 있는 기능을 갖추고 있습니다.
Amazon Cognito : 가입, 로그인, 액세스 제어 기능을 갖춘 인증 관리 서비스. Identity Pool 을 통해 Facebook, Google, Amazon과 같은 소셜 로그인과도 연동이 가능합니다.
Amazon S3 : 데이터를 저장하고 검색할 수 있는 간단한 API를 제공하는 완전 관리형 스토리지 서비스. IAM 정책이나 S3 버킷 정책으로 지정된 대상에게 공유하도록 할 수 있어요.

그리고 이번 블로그에서는 사용자 인증 기능을 추가하기 위해 Amazon Cognito를 활용해 볼 예정입니다.

Amazon Cognito 인증 추가

그럼 이제 앱을 구성하는데 있어 가장 먼저 떠오르는 기능인 회원 인증 기능을 추가해보도록 합시다!

Auth 생성하기

cmd 창에 cd 커맨드를 입력해 Android 프로젝트 폴더로 이동해주세요. (지난 블로그 글 과정을 하시다가 넘어오신 분은 그냥 진행해주세요.) 그리고 amplify add auth 를 입력해주세요.

잠깐 기다리시면 위와 같은 문구들이 뜨는데요. 각 유형에 대해서 간단히 설명드리면

Default configuration : 기본 설정으로 userpool 생성 및 보안 설정을 해줍니다.
Default configuration with Social Provider (Federation) : 기본 설정과 함께 소셜 인증 방식의 userpool 생성 및 보안 설정을 이용할 때 사용합니다.
Manual configuration : 사용자가 userpool 생성 및 보안 설정 방식을 직접 입력해서 사용합니다.

테스트로 해보는 것이기 때문에 기본 설정으로 선택해주세요. 그러고 인증 방식 종류가 나오는데 Email 을 선택할게요. 이후 추가 설정할 필요는 없기때문에 'No, I am done'으로 선택하시면 생성이 완료됩니다.

amplify status 를 입력해서 생성이 되었는지 확인해봤어요. 다행히 잘 만들어졌네요ㅎㅎ 추가가 된 것을 확인하셨으면 amplify push를 입력해서 프로젝트를 갱신해주세요.

AWS management console에서 [해당 Amplify 앱] - [Backend environments] - [dev] 로 들어가보면 push 내역을 확인할 수 있어요!

Android 프로젝트 수정하기

그럼 다시 Android 프로젝트로 돌아가봅시다. amplify 프로젝트에 Auth 생성을 했지만 앱에서는 아무런 수정을 하지 않았기 때문에 실행을 하면 여전히 Hello World말고는 보이는 게 없는데요...ㅠㅠ 지금부터 인증 기능을 테스트할 수 있도록 코드를 수정해보도록 할게요.

그 전에 설정을 하나 변경해주면 좋은 부분이 있어 짚고 갈게요!

창 맨 상단의 왼쪽에 있는 [File] - [Setting] 을 클릭하시면 위와 같은 창이 뜨는데, 검색 란에 auto import를 입력해 [Editor] - [General] - [Auto Import] 로 들어갑니다. 위와 같이 수정을 하고 확인을 눌러주세요. 이것은 외부 라이브러리나 API를 사용할 시에 자동으로 import를 해주기 때문에 코드 작성이 편리해진답니다.

그럼 이제 본격적으로 코드를 화면 왼쪽을 보면 폴더 모양들이 있고 맨 아래에 코끼리 그림이 있는걸 볼 수 있을 거에요. 더블 클릭을 해주어 'build.gradle (Module: app)' 이라고 적힌 걸 더블 클릭해서 띄워줍시다. 내용을 잘 보면 SDK 버전이나 appcompat, constraintlayout 같은 게 적혀 있는 걸 알 수 있는데요. 외부 API나 라이브러리를 추가할 때에도 여기에 추가를 해야한답니다.

// Mobile Client for initializing the SDK
implementation('com.amazonaws:aws-android-sdk-mobile-client:2.8.+@aar') { transitive = true }

// Cognito UserPools for SignIn
implementation('com.amazonaws:aws-android-sdk-auth-userpools:2.8.+@aar') { transitive = true }

// Sign in UI Library
implementation('com.amazonaws:aws-android-sdk-auth-ui:2.8.+@aar') { transitive = true }

그럼 dependencies라고 적힌 괄호 안에 위의 코드를 복붙해주세요! 붙여넣기 하시면 위에 문구가 뜨고 Sync now 라는 버튼이 뜰테니 바로 클릭해서 Sync 해주세요. 이 작업을 해주는 이유는 Sync를 해주어야 이후에 aws 관련 소스코드를 작성할 시에 반영이 되기 때문입니다!

다음은 manifests라는 폴더를 더블클릭해서 AndroidManifest.xml을 띄운 후, 코드를 추가해주세요. 저희가 앱에서 aws 서비스를 불러오려면 인터넷이 필요하기 때문에 인터넷 사용을 허용해주어야 합니다.

이제 인증을 위한 화면을 구현하기에 앞서, 새로운 Activity를 생성해줄게요. 여기서 Activity 생성을 하는 이유에 대한 설명을 따로 하기에는 내용이 너무 길어질 것 같아, Android에 대한 개념이 부족하신 분들은 이 글을 읽어보시길 바랍니다! 좌측에 'java' 라고 쓰인 폴더를 오른쪽 클릭하여 [New] - [Activity] - [Empty Activity] 를 클릭해주세요.

위와 같은 창이 뜨니 AuthActivity로 이름을 수정하고 'Finish' 버튼을 클릭해주세요.

public class AuthActivity extends AppCompatActivity {

    private final String TAG = AuthActivity.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_auth);

        AWSMobileClient.getInstance().initialize(getApplicationContext(), new Callback<UserStateDetails>() {

            @Override
            public void onResult(UserStateDetails userStateDetails) {
                Log.i(TAG, userStateDetails.getUserState().toString());
                switch (userStateDetails.getUserState()){
                    case SIGNED_IN:
                        Intent i = new Intent(AuthActivity.this, MainActivity.class);
                        startActivity(i);
                        break;
                    case SIGNED_OUT:
                        showSignIn();
                        break;
                    default:
                        AWSMobileClient.getInstance().signOut();
                        showSignIn();
                        break;
                }
            }

            @Override
            public void onError(Exception e) {
                Log.e(TAG, e.toString());
            }
        });
    }

    private void showSignIn() {
        try {
            AWSMobileClient.getInstance().showSignIn(this,
                    SignInUIOptions.builder().nextActivity(MainActivity.class).build());
        } catch (Exception e) {
            Log.e(TAG, e.toString());
        }
    }
}

그럼 Activity가 생성이 되는데 위의 소스 코드를 AuthActivity에 전부 복붙해주세요! 참고로 package와 import는 지워버리시면 안되니, 'public class...' 부분부터 붙여넣기 해주세요.

소스코드에 대해 간단하게 이야기하자면, userStateDetails라는 인스턴스에 사용자 인증에 대한 상태 정보를 담아두어 switch case 문에서 로그인 여부에 따라 접속을 제어하는 작업을 하는 것이랍니다.

마지막으로 AndroidManifest.xml을 띄워주세요. 위의 사진에 표시된 부분처럼 소스코드를 수정해주세요. intent-filter를 수정을 하는 이유는 저 소스코드 부분이 앱 시작 시에 띄울 Activity를 결정하기 때문입니다. (요즘 로그인화면이 가장 먼저 나오는건 거의 없긴하지만 테스트이기 때문에 그 부분은 넘어가는 걸로..ㅎㅎㅎ) noHistory는 로그인 후 스택에 Authentication Activity를 남겨두지 않기 위한 코드에요.

인증 확인해보기

이제 소스코드 수정은 마쳤습니다!?

그렇다면 앱을 실행해서 수정한대로 실제로 움직이는지 확인을 해주어야 하는데요. Android 폰을 갖고 계신 분이라면 그냥 연결해서 확인하셔도 상관없지만 Android Studio에서는 애뮬레이터라는 프로그램을 지원해주기 때문에 이걸 활용해보도록 할게요. 우측 상단의 안드로이드와 핸드폰이 그려진 'AVD Manager' 아이콘을 클릭해주세요.

기종은 마음에 드시는 걸로 선택하셔서 진행해주세요.

다운로드 해야할 것들이 목록으로 뜨는데 R이라는 API + 아래의 Android 버전 중 아무거나 선택하셔서 하나 다운로드 받으시면 됩니다.

마지막으로 Finish를 눌러 생성을 마쳐주세요. 이제 애뮬레이터 실행이 가능해졌으니, 상단의 초록색 재생버튼을 눌러 앱을 실행시켜주세요.

기다리시면 위와 같은 화면이 뜰텐데요. 아직 아무런 회원정보 등록도 하지 않았기 때문에 'create new account'를 눌러주세요.

저희가 앞서 email을 인증 유형 방식으로 선택했기 때문에, username은 email이 됩니다. password는 여러분이 원하시는대로 입력해주시고, email 부분은 username과 동일하게 입력해주세요. 전화번호는 입력하지 않으셔도 돼요. 다 입력하셨으면 'Sign Up'을 눌러주세요.

다음으로 넘어가시면 새로운 계정을 생성할 때 항상 나오는 인증번호 입력 단계가 나오네요. 이메일을 확인하셔서 인증번호를 입력해주세요. 혹시나 받은 메일함에 없다면 스팸 메일함 확인하는 것도 잊지 마시구요!

'confirm' 을 누르면 드디어 메인화면이 나타나게 됩니다! 제대로 로그인이 된건지 의심된다 하시는 분은 앱 데이터 삭제 후 다시 로그인 해보시면 잘 실행되는 걸 확인할 수 있으실 거에요. 참고로 회원 데이터는 aws 내에 보관됩니다.

마지막으로

이렇게 Android 앱의 인증 기능 추가를 무사히 마쳤네요!

사실 인증 기능 자체만 보면 여전히 앱으로서의 기능은 뭐라 할 것도 없지만 이렇게 쉽게 구현할 수 있는 것만으로도 감사할 따름이었습니다.. DB로 회원 정보 관리하는 과정밖에 모르던 저한테는 정말 신세계였기 때문에 다른 기능도 빨리 시험해보고 싶어지더라구요ㅎㅎ 그리고 위 내용은 실제 앱에서 Auth를 구현할 시에는 UI를 따로 만들거나 다른 인증 유형들을 사용 가능하니 여러 방법으로 시도해보시길 바랍니다!

다음에는 AppSync 기능을 이용한 GraphQL API를 끌어와 본격적인 데이터 작업들을 위한 준비를 다뤄볼 수 있도록 해볼게요. 이번 글도 많은 분들께 조금이나마 도움이 되었으면 좋겠습니다! ?